<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <link href="css/application.min.css" rel="stylesheet">
        <!-- as of IE9 cannot parse css files with more that 4K classes separating in two files -->
        <!--[if IE 9]>
        <link href="css/application-ie9-part2.css" rel="stylesheet">
        <![endif]-->
        <link rel="shortcut icon" href="img/favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="description" content="Sing App - Bootstrap 4 Admin Dashboard Template">
        <meta name="keywords" content="bootstrap admin template,admin template,admin dashboard,admin dashboard template,admin,dashboard,bootstrap,template">
        <meta name="author" content="Flatlogic LLC">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <script>
            /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
            chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
            https://code.google.com/p/chromium/issues/detail?id=332189
            */
        </script>
    </head>
    <body class="{{extraBodyClass}}">
        {{#block "sidebar"}}
            {{> sidebar }}
        {{/block}}
        {{#block "navbar"}}
            {{> navbar }}
        {{/block}}
        {{#block "theme-helper"}}
            {{> theme-helper }}
        {{/block}}

        <div class="{{#if wrapperClass}}{{wrapperClass}}{{else}}content-wrap{{/if}}">
            <!-- main page content. the place to put widgets in. usually consists of .row > .col-lg-* > .widget.  -->
            <main id="content" class="{{#if contentClass}}{{contentClass}}{{else}}content{{/if}}" role="main">
                <!-- Page content -->
                {{#block "content"}}
                    Content goes here
                {{/block}}
                {{#block "footer"}}
                    <footer class="content-footer">
                        Sing HTML5 Version - Made by <a href="https://flatlogic.com" rel="nofollow" target="_blank">Flatlogic</a>
                    </footer>
                {{/block}}
            </main>
        </div>
        <!-- The Loader. Is shown when pjax happens -->
        <div class="loader-wrap hiding hide">
            <i class="fa fa-circle-o-notch fa-spin-fast"></i>
        </div>

        <!-- common libraries. required for every page-->
        <script src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script src="../node_modules/jquery-pjax/jquery.pjax.js"></script>
        <script src="../node_modules/popper.js/dist/umd/popper.js"></script>
        <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../node_modules/bootstrap/js/dist/util.js"></script>
        <script src="../node_modules/jquery-slimscroll/jquery.slimscroll.js"></script>
        <script src="../node_modules/widgster/widgster.js"></script>
        <script src="../node_modules/pace.js/pace.js" data-pace-options='{ "target": ".content-wrap", "ghostTime": 1000 }'></script>
        <script src="../node_modules/hammerjs/hammer.js"></script>
        <script src="../node_modules/jquery-hammerjs/jquery.hammer.js"></script>


        <!-- common app js -->
        <script src="js/settings.js"></script>
        <script src="js/app.js"></script>

        <!-- Page scripts -->
        {{#block "scripts"}}
        {{/block}}
    </body>
</html>
